<template>
    <div id="case_success">
         <!-- 成功案例 -->
        <div class="success">
            <div class="success-demo">
                <h5>成功案例</h5>
                <p>案例开发，成功积累</p>
            </div>
            <div class="success-user container">
                <ul>
                    <li v-for="(num, index) in 4" :key="index" @click="$router.push(`/success_case/${index + 1}`)">
                        <img class="success-icon" :src="require(`../assets/success${index}.png`)" alt="">
                        <p class="lookdetails">查看详情</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'case_success'
    }
</script>

<style lang="stylus" scoped>
#case_success
    .success
        padding 92px 0 111px
        text-align center
        background-color #fff
        .success-demo
            margin-bottom 68px
            h5
                font-size 42px
                margin-bottom 20px
            p
                font-size 16px
                color #666
        .success-user
            ul
                display flex
                justify-content space-around
                li
                    cursor pointer
                    width 280px
                    height 280px
                    border 1px solid #EEEEEE
                    .success-icon
                        margin-top 92px
                        width 66px
                        height 66px
                        transition .5s all
                    .lookdetails
                        margin-top 66px
                        color #30B9FF
                        font-size 14px
                    &:hover
                        img
                            transform scale(1.3)
</style>